<!DOCTYPE html>
<html>
<head>
    <title></title>
		<#include "/header.html">
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <div style="float: left;height:34px;line-height:34px;">活动名称：</div>
            <div style="float: left;">
                <input type="text" class="form-control" v-model="q.name" @keyup.enter="query" placeholder="请输入内容">
            </div>
            <div style="float: left;margin-left:10px;height:34px;line-height:34px;">状态：</div>
            <div style="float: left;width:160px;margin-right: 10px;">
                <select class="form-control" v-model="q.statu" @keyup.enter="query">
                    <option></option>
                    <option value="0">未开始</option>
                    <option value="1">进行中</option>
                    <option value="2">已结束</option>
                    <option value="3">已停用</option>
                </select>
            </div>
            <a class="btn btn-primary" @click="query">查询</a>
			<#if shiro.hasPermission("sys:activity:save")>
            <a class="btn btn-primary" @click="add">&nbsp;新增裂变活动</a>
			</#if>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
														                    <div class="form-group">
                        <div class="col-sm-2 control-label"><span style="color: red">*</span>活动名称</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="activity.name" placeholder="活动名称" id="hdmc"/>
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label"><span style="color: red">*</span>活动时间</div>
                        <div class="col-sm-10">
                            <div style="float: left;width:350px;margin-right: 10px;" id="container">

                                <div class="input-group date" style="width:46%;float:left;">
                                    <input type="text" class="form-control" v-model="activity.start" id="astart"><span class="input-group-addon" id="saddon"><i class="glyphicon glyphicon-th"></i></span>
                                </div>
                                <div style="width: 4%;float:left;margin-left:7px;margin-top:8px;padding-left:1px;">
                                    -
                                </div>
                                <div class="input-group date" style="width:48%;">
                                    <input type="text" class="form-control" v-model="activity.end" id="aend"><span class="input-group-addon" id="eaddon"><i class="glyphicon glyphicon-th"></i></span>
                                </div>

                            </div>

                        </div>
                    </div>

											                    <div class="form-group">
                        <div class="col-sm-2 control-label" style="padding-left:10px;"><span style="color: red">*</span>单次可分享券数</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="activity.sharenum" placeholder="单次可分享券数" id="fxqs"/>
                            <span style="position: absolute;right: 22px;top: 8px;color: #4C4948;line-height: 1.5;">张</span>
                        </div>
                        <div style="display: table-cell !important;line-height:34px;">
                            <div id="dcfx" style="left: 50%;margin-left: -125px;margin-top: -85px;min-width: 250px;max-width: 500px;
                            padding: 10px;line-height: 24px;position: absolute;font-size: 12px;text-align: center;
                            background-color: #fff;box-shadow: 0 0 7px rgba(0,0,0,.2);z-index: 9;color: #4c4948;display: none;">
                                用户完成订单支付后会获得一个裂变红包，<span style="font-weight: 700;">单次可分享券数</span>
                                指单个裂变红包总共可被领取的优惠券数，每个裂变红包每个人最多可领取一张优惠券。

                            </div>
                            <img src="../../statics/img/ico20-question.png" onmouseover="$('#dcfx').show()" onmouseout="$('#dcfx').hide()">
                        </div>
                    </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label">供分享的优惠卷</div>
                        <div class="col-sm-10" id="yhqbtn">
                            <a class="btn btn-primary" @click="addCoupon" style="background-color: #f07065!important;color:#fff;border: none">&nbsp;选择优惠卷</a>
                            <div id="fxyhjs" style="left: 70%;margin-left: -125px;margin-top: -85px;min-width: 250px;max-width: 500px;
                            padding: 10px;line-height: 24px;position: absolute;font-size: 12px;text-align: center;
                            background-color: #fff;box-shadow: 0 0 7px rgba(0,0,0,.2);z-index: 9;color: #4c4948;display: none;">
                                系统将根据优惠券随机发放给用户，用户可通过分享活动免费领取优惠券，请谨慎选择优惠券，若优惠券的库存数量不足，将影响优惠券的发放

                            </div>
                            <img src="../../statics/img/ico20-question.png" onmouseover="$('#fxyhjs').show()" onmouseout="$('#fxyhjs').hide()">
                        </div>
                    </div>
            <div class="form-group" style="width:1100px;">
                <div class="col-sm-2 control-label" style="width:132px;">

                </div>
                <div class="col-sm-10" style="width:950px;">
                    <div style="border: none!important;margin: 0!important;width: 100%;">
                        <div style="margin-bottom: 0;border: 1px solid #e2e5ed!important;min-height: .01%;margin-top: 15px;">
                            <table style="border-top-left-radius: 3px;border-top-right-radius: 3px;
                            border: 0;display: table;margin-bottom: 0!important;width: 100%;border-collapse: collapse;">
                                <thead style="background-color: #F7F9FB;">
                                <th style="border-right:solid 1px rgb(226, 229, 237);padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;">优惠卷名称</th>
                                <th style="border-right:solid 1px rgb(226, 229, 237);padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;">消费门槛</th>
                                <th style="border-right:solid 1px rgb(226, 229, 237);padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;">有效期</th>
                                <th style="border-right:solid 1px rgb(226, 229, 237);padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;">每人限领</th>
                                <th style="border-right:solid 1px rgb(226, 229, 237);padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;">库存</th>
                                <th style="border-top: 0;border-bottom: 0;border-left: 0;padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;" id="cz">操作</th>
                                </thead>
                                <tbody id="coupons">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
											                    <div class="form-group">
                        <div class="col-sm-2 control-label">支持场景</div>
                        <div class="col-sm-10">
                            <label class="radio-inline" style="float: left">
                                <input type="radio" name="conditions"  value="0" v-model="activity.support"/> 货架订单支付
                            </label>
                            <label class="radio-inline" style="float: left;color: #999!important;">
                                <input type="radio" name="conditions"  value="1" v-model="activity.support" disabled="disabled"/> 外卖订单支付(暂未开通)
                            </label>
                        </div>
                    </div>

							            <div class="form-group" >
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定" id="btnid"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-default" @click="reload" value="返回"/>
            </div>
        </form>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <form class="form-horizontal">
                <div class="modal-content" style="width: 650px;">
                    <div style="padding: 15px;">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div style="padding: 20px 0;border-bottom: 1px solid #E2E5ED;">
                            <p style="font-size: 14px;color: #4c4948;float: left;margin: 0!important;">选择优惠卷</p>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div style="margin-bottom: 15px">
                            <div style="float: left;margin-left:10px;height:34px;line-height:34px;">优惠卷名称：</div>
                            <div style="float: left;width:160px;margin-right: 10px;">
                                <input type="text" class="form-control" v-model="q.name" @keyup.enter="query" placeholder="请输入内容">
                            </div>
                            <a class="btn btn-primary" @click="query">搜索</a>
                        </div>

                        <table id="jqGridAdd" style="width: 100%;"></table>
                        <div id="jqGridPagerAdd" style="width: 100%"></div>
                        <a class="btn btn-primary" @click="showCoupon" style="margin-left: 290px;margin-top: 10px">确定</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="${request.contextPath}/statics/js/modules/sys/activity.js?_${.now?long}"></script>

</body>
</html>